<template>
	<div class="hy-container">
		<HyTable
			:searchFields="searchFields"
			:searchConfig="searchConfig"
			:searchDefault="searchDefault"
			:tableConfig="tableConfig"
			:tableColumns="tableColumns"
			ref="hyTableRef"
			:buttonConfig="{
				span: 4,
				offset: 1,
			}"
			:type="tabs"
			:tabls="tabls"
			@handleClick="handleClick"
		>
			<template #dateSlot="{ row }">
				<el-button type="primary" plain v-if="row.declareTime">{{ row.declareTime }}</el-button>
				<span v-else>--</span>
			</template>
			<template #statusSlot="{ row }">
				<el-tag :class="setColor(row.status.toString())">{{ isStatus(row.status).isStatusString }}</el-tag>
			</template>
			<template #operation>
				<el-table-column fixed="right" label="操作" width="130">
					<template #default="scoped">
						<div class="flex items-center w-full justify-center">
							<el-button text type="primary" icon="View" @click="getAppCode(scoped.row)">查看</el-button>
							<el-button
								v-if="scoped.row.status == '2'"
								:disabled="!scoped.row?.canBack"
								text
								type="primary"
								icon="RefreshLeft"
								@click="getAppCode(scoped.row, 'cancel')"
								>撤回</el-button
							>
						</div>
					</template>
				</el-table-column>
			</template>
		</HyTable>
	</div>
</template>

<script lang="ts" setup>
import HyTable from '/@/components/HyTable/index.vue';
import Dialog from '../dialog/index.vue';
import { declareCancel, declareDelete, declareVerifyPage } from '/@/api/digitalList/applicationRevew';
import { declareCancelByNew } from '/@/api/digitalList/digitalLization';
import type { TabsPaneContext } from 'element-plus';
import { Reading } from '@element-plus/icons-vue';
import { revocation } from '@cqdcg/admin/views/flow/task/revocation';
const hyTableRef = ref();
const tabs = ref('tabs');
const tabsTypy = ref('1');
const tabls = computed(() => {
	return {
		type: 'card',
		tablesList: [
			{
				lable: '开发项目',
				value: 1,
			},
			{
				lable: '运维项目',
				value: 2,
			},
		],
	};
});
const searchDefault = computed(() => {
	return {
		type: tabsTypy.value,
	};
});
const tableColumns = computed(() => {
	return [
		{ prop: 'appCode', label: '数字化应用编号', width: 300 },
		{ prop: 'appName', label: '数字化应用名称', width: 300 },
		{ prop: 'domain', label: '所属领域', width: 200 },
		{ prop: 'responsibleDept', label: '责任部门', width: 200 },
		{ prop: 'leadDept', label: '应用牵头部门', width: 200 },
		{ prop: 'declareTime', label: '申报时间', width: 300 },
		{ prop: 'status', label: '状态', slot: 'statusSlot', fixed: 'right' },
	];
});
const tableConfig = computed(() => {
	return {
		request: declareVerifyPage,
	};
});
const searchConfig = ref({
	labelWidth: '120px',
	span: 6,
	offset: 0,
	type: 'search',
	title: '数字化应用申报审核',
	show: true,
});
const status5 = ref(false); //撤回
const whiachStatus = ref('');
const changeStatus = (e?: Event) => {
	whiachStatus.value = '1';
	switch (e) {
		case '1': //选择待审核
			status5.value = true;
			break;
		default: //选择修改中、通过、通过只显示查看
			whiachStatus.value = ''; //赋值空不显示，只留查看
			status5.value = false;
			break;
	}
};
const list = reactive({
	searchFields: {
		key: {
			type: 'input',
			label: '关键字',
		},
		status: {
			type: 'select',
			label: '状态',
			options: [
				{
					label: '待审核',
					value: '1',
				},
				{
					label: '已通过',
					value: '2',
				},
				// {
				// 	label: '通过',
				// 	value: '4',
				// },
				{
					label: '未通过',
					value: '3',
				},
				{
					label: '修改中',
					value: '5',
				},
			],
			change: changeStatus,
		},
		timeArr: {
			type: 'date',
			span: 7,
			picker: 'datetimerange',
			label: '开始日期',
		},
	},
});
const { searchFields } = toRefs(list);
const router = useRouter();
//动作完后调用接口
const requestList = () => {
	hyTableRef.value.handleRest();
};
//接收tab值调用接口
const handleClick = (tab: TabsPaneContext) => {
	switch (tab) {
		case '1':
			tabsTypy.value = '2';
			setTimeout(() => {
				requestList();
			}, 500);
			break;

		default:
			tabsTypy.value = '1';
			setTimeout(() => {
				requestList();
			}, 500);
			break;
	}
};
//读取状态
const isStatus = (str?: number) => {
	const obj = ref({
		isStatusString: '',
		statusButton: '',
	});
	switch (str) {
		case 2:
			obj.value.isStatusString = '已通过';
			obj.value.statusButton = 'success';
			break;
		case 3:
			obj.value.isStatusString = '未通过';
			obj.value.statusButton = 'warning';
			break;
		default:
			obj.value.isStatusString = '待审核';
			obj.value.statusButton = '';
			break;
	}
	return obj.value;
};

//撤回流程组件
const cancelFunction = (id: any) => {
	const obj = {
		processInstanceId: id,
	};
	revocation(obj)
		.then((res: any) => {
			requestList();
		})
		.catch((err: any) => {});
};
//设置颜色
const setColor = (type: string) => {
	switch (type) {
		case '1':
			return 'wait-tag'; //待审核
		// case '2':
		// 	return '#E6F7FF'; //申报中
		// case '5':
		// 	return '#E6FFFB'; //修改审核中
		case '3':
			return 'refuse-tag'; //未通过
		case '2': //通过
			return 'agree-tag';
		default: //修改中
			return 'edit-tag';
	}
};
const getAppCode = (row?: any, string?: string) => {
	switch (string) {
		case 'cancel':
			cancelFunction(row.processInstanceId);
			break;
		default:
			// 跳转详情页面
			router.push({
				path: '../detail/demandDeclaration',
				query: {
					title: searchConfig.value.title,
					isStatus: row.status,
					status: row.status,
					type: tabsTypy.value,
					id: row.id,
					// canBack: row.canBack,
					appCode: row.appCode, //项目编号
					processInstanceId: row.processInstanceId, //流程实例id
					taskId: row.taskId, //任务id
					nodeId: row.nodeId, //节点id
					instanceId: row.processInstanceId,
					pageTap: 'numDecs',
				},
			});
			break;
	}
};
</script>
<style scoped lang="scss">
.dropdown-class {
	margin-left: 10px;
}
</style>
